<!DOCTYPE html>
<!-- a simple example of using handling incoming calls -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Incoming Call Example</title>
    <script src="../webphone_api.js?jscodeversion=338"></script>
</head>
<body>
    <div>This is the simplest example to demonstrate how to handle an incoming call and display the caller's name.<br />Don't use this in production as it is not a complete implementation.<br /><br /><br /></div>

    <button id="btn_hangup" onclick="Hangup()" style="display: none;">Hangup</button>
    <div id="icoming_call_layout" style="display: none;">
        ----------------------<br />
        <button id="btn_accept" onclick="Accept()">Accept</button>
        <button id="btn_reject" onclick="Reject()">Reject</button><br />
        ----------------------<br /><br />
    </div>
    <iframe allow="microphone; camera" style="display:none" height="0" width="0" id="loader"></iframe>
    <div id="caller_info"></div>

    <script>
        webphone_api.onLoaded(function ()
        {
            webphone_api.setparameter('serveraddress', 'YOURSIPDOMAIN.COM');
            webphone_api.setparameter('username', 'USERNAME');
            webphone_api.setparameter('password', 'PASSWORD');
            
            webphone_api.start();
        });

        function Hangup()
        {
            webphone_api.hangup();
            document.getElementById('btn_hangup').style.display = 'none';
        }
        
        function Accept()
        {
            document.getElementById('icoming_call_layout').style.display = 'none';
            document.getElementById('btn_hangup').style.display = 'block';
            webphone_api.accept();
        }
        
        function Reject()
        {
            document.getElementById('icoming_call_layout').style.display = 'none';
            webphone_api.reject();
        }
        // to initiate an outgoing you would call the following API function   webphone_api.call(DESTINATION_NUMBER);

        // handling actions on call state change
        webphone_api.onCallStateChange(function (event, direction, peername, peerdisplayname, line)
        {
            if (event === 'callSetup')
            {
                if (direction == 1)
                {
                    // means it's outgoing call
                }
                else if (direction == 2)
                {
                    // means it's icoming call
                    document.getElementById('icoming_call_layout').style.display = 'block'; // display Accept, Reject buttons
                    document.getElementById('caller_info').innerHTML = peerdisplayname + ' - ' + peername;
                }
            }
            
            // end of a call, even if it wasn't successfull
            if (event === 'callDisconnected')
            {
                document.getElementById('icoming_call_layout').style.display = 'none'; // hide Accept, Reject buttons
                document.getElementById('caller_info').innerHTML = '';
            }
        });
    </script>
</body>
</html>
